<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
			<el-form-item label="客户端ip" prop="clientIp">
				<el-input v-model="queryParams.clientIp" placeholder="请输入登录地址" clearable style="width: 240px;" @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="服务名" prop="serviceName">
				<el-input v-model="queryParams.serviceName" placeholder="请输入操作人员" clearable style="width: 240px;"	@keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="用户名称" prop="createBy">
				<el-input v-model="queryParams.createBy" placeholder="请输入用户名称" clearable style="width: 240px;" @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="请求url" prop="requestUri">
				<el-input v-model="queryParams.requestUri" placeholder="请输入请求url" clearable style="width: 240px;" @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="操作时间" style="width: 308px">
				<el-date-picker
					v-model="dateRange"
					value-format="YYYY-MM-DD HH:mm:ss"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					:default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
					@change="handleQuery"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
				<el-button icon="Refresh" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="danger" icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['monitor:operlog:remove']" >删除</el-button>
			</el-col>
			<!-- <el-col :span="1.5">
				<el-button type="warning" icon="Download" @click="handleExport" v-hasPermi="['monitor:operlog:export']" >导出</el-button>
			</el-col> -->
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table border ref="operlogRef" v-loading="loading" :data="operlogList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="50" align="center" />
			<el-table-column prop="startTime" label="操作时间" width="160">
				<template #default="scope">
					<span>{{ parseTime(scope.row.startTime) }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="serviceName" label="服务名" show-overflow-tooltip />
			<el-table-column prop="title" label="日志标题" show-overflow-tooltip />
			<el-table-column prop="createBy" label="操作人员" show-overflow-tooltip />
			<el-table-column prop="className" label="类名" show-overflow-tooltip />
			<el-table-column prop="executeTime" label="执行耗时" show-overflow-tooltip>
				<template #default="scope">{{ scope.row.executeTime }} ms</template>
			</el-table-column>
			<el-table-column prop="clientIp" label="客户端ip" show-overflow-tooltip />
			<el-table-column prop="clientAddr" label="请求地址" show-overflow-tooltip />
			<el-table-column prop="userAgent" label="用户代理" show-overflow-tooltip />
			<el-table-column prop="requestUri" label="请求url" show-overflow-tooltip />
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template #default="scope">
						<el-button link type="primary" icon="View" @click="handleView(scope.row, scope.index)" v-hasPermi="['monitor:operlog:query']">详细</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total"	v-model:page="queryParams.current" v-model:limit="queryParams.size" @pagination="getList" />

		<!-- 操作日志详细 -->
		<el-dialog title="操作日志详细" v-model="open" width="800px" append-to-body>
			<el-form :model="form" label-width="100px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="操作模块:">{{ form.serviceName }} / {{ form.title }}</el-form-item>
						<el-form-item
							label="登录信息："
						>{{ form.createBy }} / {{ form.clientIp }} / {{ form.clientAddr }}</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="请求地址:">{{ form.requestUri }}</el-form-item>
						<el-form-item label="请求方式:">{{ form.requestMethod }}</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="方法名:">{{ form.method }}</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="表单参数:"><div style="wordBreak: break-all">{{ form.params }}</div></el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="请求参数:"><div style="wordBreak: break-all">{{ form.args }}</div></el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="消耗时间:">{{ form.executeTime }}毫秒</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="响应代码:">{{ form.resCode }}</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="响应数据:"><div style="wordBreak: break-all">{{ form.resData }}</div></el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="操作时间:">{{ parseTime(form.startTime) }}</el-form-item>
					</el-col>
					<el-col :span="24">
						<el-form-item label="异常信息:" ><div style="wordBreak: break-all">{{ form.exception }}</div></el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="open = false">关 闭</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="Operlog">
import { listOperlog, delOperlog } from "@/api/system/operlog"

const { proxy } = getCurrentInstance()

const operlogList = ref([])
const open = ref(false)
const loading = ref(true)
const showSearch = ref(true)
const ids = ref([])
const multiple = ref(true)
const total = ref(0)
const title = ref("")
const dateRange = ref([])

const data = reactive({
  form: {},
  queryParams: {
    current: 1,
    size: 10,
    clientIp: undefined,
		serviceName: undefined,
    createBy: undefined,
    requestUri: undefined
  }
})

const { queryParams, form } = toRefs(data)

/** 查询登录日志 */
function getList() {
  loading.value = true
  listOperlog(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
   	const result = response.result || {}
    operlogList.value = result.records || []
    total.value = Number(result.total)
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.current = 1
  getList()
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = []
  proxy.resetForm("queryRef")
  queryParams.value.current = 1
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.logId)
  multiple.value = !selection.length
}

/** 详细按钮操作 */
function handleView(row) {
  open.value = true
  form.value = row
}

/** 删除按钮操作 */
function handleDelete(row) {
  const logIds = row.logId? [row.logId] : ids.value
  proxy.$modal.confirm('是否确认删除日志编号为"' + logIds + '"的数据项?').then(function () {
    return delOperlog(logIds)
  }).then(() => {
    getList()
    proxy.$modal.msgSuccess("删除成功")
  }).catch(() => {})
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download("monitor/operlog/export",{
    ...queryParams.value,
  }, `config_${new Date().getTime()}.xlsx`)
}

getList()
</script>
